/* 用户中心样式 */

// 用户中心通用
.user-center { margin:20px auto; @extend .clearfloat;
    .user-center-top { padding:20px 35px; height:80px; background: #fff; @extend .boxshadow01; @extend .clearfloat; 
        .user-header { width:400px; 
            img { width:80px; height:80px; border-radius:4px; float:left; }
            .text { float:left; font-size:14px; line-height:30px; padding:10px 0; margin-left:20px;
                h4 { font-size:18px; font-weight:bold; color:#333; letter-spacing:1px; }
            }
        }
        .authentication { width:240px; float:right; margin-top:10px;
            li { float:left; width:80px; height: 60px; text-align:center; 
                i { @extend .icon; display:block; width:38px; height:38px; margin:0 auto; }
                .i1 { background-position:0 -500px; }
                .i2 { background-position:-100px -500px; }
                .i3 { background-position:-200px -500px; }
                &.have-auth { color:$greenlight;
                    .i1 { background-position:0 -600px; }
                    .i2 { background-position:-100px -600px; }
                    .i3 { background-position:-200px -600px; }
                }
            }
        }
    }
    .user-center-content { background:#fff; @extend .clearfloat; margin-top:20px; overflow: hidden; }
    .user-side-nav { width:189px; float:left; border-right:1px solid #ddd; background:#f7f7f7; padding-bottom:9999px; margin-bottom:-9999px;
        .menu {
            li{ height:80px; line-height: 80px; position:relative;
                a{ position:absolute; top: 0; left: 0; width:190px; border-bottom:1px solid #ddd;  display: block; font-size:16px; color:#555; text-indent:0px; line-height:79px;
                    .iconfont { font-size:24px; margin-right:10px; float:left; width:30px; text-align:center; margin-left:40px; color:#777; }
                    &:hover { color:$red; }
                    &.active { background:#fff; color:$red; 
                        .iconfont { color:$red; }
                    }
                }
            }
        }
        .wx-ewm { text-align:center; padding:20px 0; color:$blue; line-height:30px;
            img { margin:0 auto; width:70%; display:block; }
        }
    }
    .user-main-con { float:right; padding:40px; width:930px; min-height:600px; }
}
.tabs-wrap { position:relative; 
    .money-btn { font-size:0; position:absolute; right:0; top: 10px;
        a{ display: inline-block; font-size:14px; box-sizing: border-box; width:100px; height:36px; line-height: 36px; text-align: center; border-radius:5px; margin:0 8px; transition: all 300ms;
            &:hover{ @extend .boxshadow; }
            &.a1{ border:1px solid $red; background:$red; color:#fff; }
            &.a2{ border:1px solid $red; color:$red; }
        }
    }
}
.user-tabs { @extend .clearfloat; border-bottom:2px solid #e0e0e0; height:58px; position:relative; margin-bottom:20px;
    a { float:left; width:110px; font-size:18px; letter-spacing:1px; border-bottom:2px solid #e0e0e0; line-height:58px; text-align:center; 
        &.active { color:$red; border-color:$red;  }
        &:hover { color:$red; }
    }
}
.user-tabs-bd {
    .tab { display:none; }
}
.total-profit { margin-bottom:20px; @extend .clearfloat;
    li { float:left; width:25%; 
        i { float:left; width:38px; height:38px; line-height:38px; text-align:center; font-weight:bold; font-size:16px; border:4px solid #ff712b; color:#ff712b; border-radius:50%; @extend .ie-radius; background:#fff; }
        .i2 { color:#ff9630; border-color:#ff9630; }
        .i3 { color:#fdd000; border-color:#fdd000; }
        .i4 { color:#5b9fe2; border-color:#5b9fe2; }
        .i5 { color:$greenlight; border-color:$greenlight; }
        h4 { float:left; margin-left:10px; font-size:14px; line-height:23px; color:#777; 
            span { display:block; font-weight:bold; color:#333; 
                em { font-size:16px; margin-right:2px; }
            }
        }
    }
}

.m-user-title{ padding-bottom:20px; border-bottom:1px solid #e3e3e3; line-height:1; height:18px; color:#555; 
    span{ font-size:18px; font-weight: bold; border-left:4px solid $red; padding-left:7px; float:left; letter-spacing:1px; }
}

.user-m-table{ width:100%; border-collapse: collapse; border-spacing: 0; font-size:14px;
    .not-data{
        padding:50px 0;
        p{
            margin-top:10px;
        }
    }
    .no:hover{
        background:none;
    }
    .detail{
        &:hover{ color:#e74444; }
    }
    tr{ transition: all 300ms;
        &:hover{ background:#fff7c0; }
    }
    th, td { text-align: center; }
    td { height:60px; }
    th{ height:50px; background:#fbfbfc; font-weight: normal; }
}

// 用户中心首页
/*user index*/
.user-index{  line-height: 1; 
    .account-info{ 
        h3{ font-size:16px; color:#777; }
        p{  margin-top:10px; font-size:14px;
            em { font-size:24px; margin-right:5px; }
        }
        .fl { margin-right:60px; }
        .right{ font-size:0;
            a{ display: inline-block; font-size:14px; box-sizing: border-box; width:100px; height:36px; line-height: 36px; text-align: center; border-radius:5px; margin:0 8px; transition: all 300ms;
                &:hover{ @extend .boxshadow; }
                &.a1{ border:1px solid $red; background:$red; color:#fff; }
                &.a2{ border:1px solid $red; color:$red; }
            }
        }
        .total-profit { border-top:1px dashed #e0e0e0; margin-top:30px; padding-top:30px; @extend .clearfloat; }
    }
    .assets-info{ margin-top:40px; border:1px solid #e0e0e0; padding:20px; border-radius:6px; 
        
        .content{
            margin-top:20px;
        }
        .list{ overflow: hidden; font-size:14px; float:left; margin-left:20px;
            dl{ height:50px; line-height: 50px; }
            dd{ padding:0 10px; }
            dt,dd{float:left; height:50px; overflow: hidden;}
            dt{ width:50px; font-size:0; }
            .item1{ width:120px; }
            .item2{ width:80px; }
            .item3{ width:140px; }
            .block{ width:14px; height:14px; display: inline-block; vertical-align: middle;
                &.b1{ background:#5b9fe2; }
                &.b2{ background:#a8daf0; }
                &.b3{ background:#ff712b; }
                &.b4{ background:#ff9630; }
                &.b5{ background:#fdd000; }
            }
        }
        .pie{ float:right; position: relative; width:300px; margin-right:60px; height:240px;
            #index-charts{ position: absolute; left:0; top:-20px; }
        }
    }

    .trade-list{
        margin-top:50px;
    }
}

// 理财顾问
.financial-adviser {
    .financial-adviser-module{border-top:1px solid #ebebeb; padding:20px;}
    .financial-adviser-title{border-left:3px solid #f44545; font-size:18px; padding-left:8px; line-height: 1; font-weight: normal;}
    .financial-adviser-table{ margin:0 auto; border:1px solid #e0e0e0; border-collapse:collapse; }
    .financial-adviser-table th{height:55px; color:#8c886a; background:#f1f1f1; border:1px solid #e0e0e0; font-weight: normal;}
    .financial-adviser-table td{text-align: center; color:#b3af8b; height:55px; border:1px solid #e0e0e0; color:#888;}
    .financial-adviser-desc{line-height: 48px; font-size:16px; color:#888;}
    .financial-adviser-desc h2{font-size:16px; font-weight: normal; color:#f44545;}
    .financial-adviser-desc h3{font-size:16px; font-weight: normal; color:#333;}
    .financial-adviser-desc .financial-adviser-table{margin:30px auto;}
    .financial-adviser .tab2,.financial-adviser .tab3{padding:20px;}
    .not-data{
        padding:50px 0;
    }
}

// 交易密码
.trade-pass{background:#fff; border:1px solid #ebebeb; min-height: 500px;}
.trade-pass-bd{padding:20px;}

/**
 * 联系客服
 */
.service{ background:#fff; }
.service-bd{ padding:20px; }
.service-bd li{ height:40px; line-height: 40px; color:#000; font-size:14px; }
.service-bd li span { color:#666; }


/*会员操作(登陆、注册、找回密码等)*/
.user-action{ width:100%; background:url(../images/user/login_bg.jpg) center top no-repeat; height:703px; display: table; text-align: center;
    .user-action-warp{ display: table-cell; text-align: center; vertical-align: middle; }
    .reg-weal { width:455px; margin:0 auto; display: block; margin-bottom: 20px; }
    .user-action-box{ width:375px; padding:40px; background:#fff; display: inline-block;
        .title{ line-height: 1; font-size:24px; }
        .form{
            .form-group{ margin-top:20px; }
            .label{ width:100%; height:54px; border:1px solid #e2e2e2; display: block; position: relative; overflow: hidden; transition: all 300ms;
                &.focus{ border-color:#66afe9; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);  }
            }
            .iconfont{ font-size:30px; position: absolute; left:0px; top:0px; width:54px; line-height: 54px; height:100%; color:#c7c7c7; }
            .input{ position: absolute; right:0; border:0; width:300px; padding-right:20px; height:52px; line-height: 52px; font-size:16px; background:none; }
            .right{ position: absolute; right:20px;
                &.send-code{ margin-top:17px; font-size:16px; color:#00b4ff; }
                &.code{
                    margin-top:12px;
                }
            }
            .placeholder{ position: absolute; left:54px; top:17px; font-size:16px; color:#c3c3c3; }
            .user-operation{ margin:15px 0; text-align: left; font-size:16px;
                .agreement{ vertical-align: middle; color:#999; }
                a{ color:#c3c3c3;
                    &:hover{
                        color:#e74444;
                    }
                }
            }
            .submit-btn{ display: block; padding:15px 0; background:#e74444; color:#fff; font-size:18px; border-radius: 3px;
                &:hover{
                    background:#e95454;
                }
            }
        }
    }
}

// 投资人测评
.questionnaire  { border:1px solid #ddd; padding: 20px; padding-bottom: 100px;
    h2 { text-align: center; font-size: 22px; color: #000; padding-top: 20px; }
    .tips { background: #f1f1f1; padding: 10px; margin:30px auto; }
    .question-item { border-bottom: 1px #ddd dashed;  font-size: 14px; line-height: 32px; padding: 20px; 
        h4 { color: #000;  font-size:16px;  }
        ul { @extend .clearfloat; 
            li { margin-top:10px; }
        }
    }
    .btn-wrap { @extend .clearfloat; margin-top:20px; text-align:center; margin-top:40px;
        a { display:inline-block; margin-left: 20px; }
    }
    .questionnaire-result { background: #f1f1f1; padding: 20px; line-height: 2; font-size:14px; 
        h4 { font-size:16px; color:#000; }
        em { color: $red; }
    }
}

/**
 * 注册协议
 */
.reg_protocol{background:#fff; margin-top:20px; padding:20px;}
.reg_protocol h2{text-align: center; font-size:20px;}
.reg_protocol h3{font-weight: bold; font-size:16px;}
.reg_protocol p{line-height: 30px;}


/**
 * 会员消息
 */
.user-msg-bd{margin-top:20px;}
.user-msg-bd table{border-bottom: 1px solid #f5f5f5;}
.user-msg-tab{position: relative;}
.user-msg-tab li{float:left; width:118px; height:42px; position: relative; line-height: 42px; text-align: center; background:#f5f5f5; border:1px solid #e0e0e0; margin-left:-1px;}
.user-msg-tab li a{display: block;}
.user-msg-tab li.active{background:#fff; border-bottom: 1px solid #fff;}
.user-msg-tab li.active:after{content:" "; display: block; position: absolute; height:2px; width:100%; background:#da0d0d; top:-1px;}
.user-msg-tab ul{position: relative; z-index: 2;}
.user-msg-tab .line{border-top:1px solid #e0e0e0; position: absolute; width: 100%; bottom:0;z-index: 1;}
.user-msg-show{border:1px solid #e0e0e0;  border-bottom: none;}
.user-msg-show-top{padding:20px;}
.user-msg-show-top .title{font-size:14px;}
.user-msg-show-top .content{line-height: 24px; color:#888; margin-top:10px;}
.user-msg-show-top .admin-info{color:#888; margin-top:20px;}
.user-msg-show-bottom{height:30px; line-height: 30px; background:#f5f5f5; border:1px solid #e0e0e0; border-left:none; border-right: none; padding:0 20px; text-align: right;}
.user-msg-show-bottom a{color:#888;}
.user-msg-ft{margin-top:10px;}
.user-msg-ft .select-all{margin-left:20px;}
